var chartData = [];
var detailData = [];
var options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.'
};

var mapData = $("#mapList").val();
var mapList = eval("("+mapData+")");
var cTotal = mapList.length;
var pTotal = 0;
var pUse = 0;
var dTotal = 0;
for(var i=0;i<mapList.length;i++){
    var data_i = mapList[i];
    var loc = new Array();
    pTotal = pTotal + parseInt(data_i.park_total);
    pUse = pUse + parseInt(data_i.park_use);
    dTotal = dTotal + parseInt(data_i.device_total);
    loc.push(data_i.longitude);
    loc.push(data_i.latitude)
    chartData.push({
        name:data_i.c_name,
        value:loc
    })

    detailData.push({
        carsitTotal:data_i.park_total,
        canuseTotal:data_i.park_use,
        deviceTotal:data_i.device_total,
        address:data_i.c_address
    })
}
$(function(){
    loadLeftBar('barDiv');
    loadRada('radaDiv');

    var user_val= $("#user_div").html();
    var c_total_div = new CountUp('c_total_div', 0, cTotal, 0, 3, options);
    var p_use_div = new CountUp('p_use_div', 0, pUse, 0, 3, options);
    var p_total_div = new CountUp('p_total_div', 0, pTotal, 0, 3, options);
    var p_device_div = new CountUp('p_device_div', 0, dTotal, 0, 3, options);
    var user_div = new CountUp('user_div', 0, user_val, 0, 3, options);
    c_total_div.start();
    p_use_div.start();
    p_total_div.start();
    p_device_div.start();
    user_div.start();
    //loadMap("map");
});

function loadMap(id){
    var myChart = echarts.init(document.getElementById(id));
    $.get('/js/plugins/echarts/changsha.json',function(geoJson){
        echarts.registerMap('changsha',geoJson,{});
        /*var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            visualMap: {
                min: 500,
                max: 50000,
                top:"top",
                text:['High','Low'],
                left: 'right',
                realtime: false,
                calculable: true,
                show:false,
                //zoom: 2,
                inRange: {
                    color: ['#313695','#4575b4', '#74add1','#abd9e9','#e0f3f8']
                }
            },
            series: [
                {
                    name: '西城',
                    type: 'map',
                    mapType: 'changsha',
                    aspectScale: 0.75,  //地图长度比
                    roam: false,
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        }
                    },
                    data: [
                        {name: '天心区', value: 17000},
                        {name: '岳麓区', value: 1000},
                        {name: '开福区', value: 5000},
                        {name: '雨花区', value: 20000},
                        {name: '芙蓉区', value: 20000},
                        {name: '长沙县', value: 25000},
                        {name: '望城区', value: 30000},
                        {name: '宁乡县', value: 18000},
                        {name: '浏阳市', value: 2300}
                    ]
                }
            ]
        };*/
        var option={
            tooltip: {
                trigger: 'item',
                // alwaysShowContent:true,
                position: function (point, params, dom, rect, size) {
                    //alert(params.dataIndex)
                    var index = params.dataIndex;
                    var address = detailData[index].address;
                    if(address.length > 8){
                        address = detailData[index].address.substring(0,8) + "<br>" + detailData[index].address.substring(8);
                    }
                    $(dom).html('<div class="toolTip"><div class="tool_title">'+params.name+'</div><div class="item_title">车位总数：'+formatNum(detailData[index].carsitTotal)+'个</div><div class="item_title">可用车位：'+formatNum(detailData[index].canuseTotal)+'个</div><div class="item_title">设备总数：'+formatNum(detailData[index].deviceTotal)+'个</div><div class="item_title ">地址：'+address+'</div></div>');
                }
            },
            visualMap: {
                realtime: false,
                calculable: true,
                show:false,
            },
            geo:{
                map:'changsha',
                label:{
                    emphasis:{
                        show:false
                    }
                },
                roam:true,
                itemStyle:{
                    normal:{
                        areaColor:'#323c48',
                        borderColor:'#111'
                    },
                    emphasis:{
                        areaColor:'#2a333d'
                    }
                }
            },
            series:[{
                //type:'scatter',
                type: 'effectScatter',
                coordinateSystem:'geo',
                data:chartData,
                symbolSize:function(val){
                    return 8;
                }
            }]
        };
        myChart.setOption(option);
    });
}
function loadLeftBar(id){
    var left_top_div = new CountUp('left_top_div', 0, parseInt($('#left_top_div').html()), 2, 3, options);
    left_top_div.start();

    var monthData = $("#monthFeeList").val();
    var monthList = eval("("+monthData+")");
    var legendArray = new Array();
    var dataArrary = new Array();
    for(var i=0;i<monthList.length;i++){
        legendArray.push(monthList[i].month);
        dataArrary.push(monthList[i].sum_fee)
    }

    var leftBar = echarts.init(document.getElementById(id));
    option = {
        color: ['#0BA7FF'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },formatter: function(params) {
                var result = ''
                var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:0px;width:15px;height:10px;background-color:#1197b8"></span>'
                params.forEach(function (item) {
                    result += item.axisValue + "</br>" + dotHtml + "车场收费金额：" + formatNum(item.data) + "元"
                })
                return result
            }
        },
        grid: {
        	x:'0',
            y:'8',
            left: '-4%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
				boundaryGap:true,
                data : legendArray,
                position: 'bottom',  // x轴的位置
                offset: 0, // x轴相对于默认位置的偏移
                //nameGap: 15,
                axisLabel: {
                    show: true,
                    interval:0,
					alignWithLabel:true,
                    rotate:0,
                    textStyle: {
                        color: '#FFFFFF',  //更改坐标轴文字颜色
                        fontSize : 8      //更改坐标轴文字大小
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#FFFFFF' //更改坐标轴颜色
                    }
                },
                axisTick: {
                    show: false
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel: {
                    textStyle: {
                        color: '#FFFFFF',  //更改坐标轴文字颜色
                        fontSize : 8      //更改坐标轴文字大小
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#2FA8FF'],
                        width: 1,
                        type: 'solid',
                        opacity:0.5
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#FFFFFF' //更改坐标轴颜色
                    }
                },
                axisTick: {
                    show: false
                }
            }
        ],
        series : [
            {
                name:'车场费用',
                type:'bar',
                barWidth: '60%',
                itemStyle:{
                    emphasis:{color:'#26E0DA'} //鼠标悬停变色
                },
                data:dataArrary
            }
        ]
    };
    leftBar.setOption(option);
}

function loadRada(id){
    var radaBar = echarts.init(document.getElementById(id));
    var data = $("#compositeMap").val();
    var compositeMap = eval("("+data+")");
    var cMap = new Array();
    cMap.push(compositeMap.customer_satisfaction);
    cMap.push(compositeMap.orders_timeliness);
    cMap.push(compositeMap.safety_index);
    cMap.push(compositeMap.equipment_maintenance_level);
    cMap.push(compositeMap.parking_space_utilization);
    cMap.push(compositeMap.property_fee);
    //alert(val.period_date)
    option = {
        tooltip: {},
        legend: {
            show:false
        },
        radar: {
            // shape: 'circle',
            splitNumber: 5, // 雷达图圈数设置
            splitLine:{show: false},
            name: {
                textStyle: {
                    color: '#fff',
                    //backgroundColor: '#999',
                    fontSize : 8,      //更改坐标轴文字大小
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                { name: '客户满意度', max: 100},
                { name: '工单及时率', max: 100},
                { name: '安全指数', max: 100},
                { name: '设备维保水平', max: 100},
                { name: '车位使用率', max: 100},
                { name: '物业费收缴', max: 100}
            ],
            //center: ['25%','40%'],
            radius: 60
        },
        series: [{
            name: '本月综合指标评估',
            type: 'radar',
            // areaStyle: {normal: {}},
            symbolSize: 0.5,
            splitLine : {
                show : true,
                lineStyle : {
                    width : 0,
                },
            },
            splitArea : {
                show : true,
                areaStyle : {
                    color: 'rgba(255,0,0,0)', // 图表背景的颜色
                },
            },
            itemStyle: {
            	normal:{
                    color: "#FFFFFF",
					borderWidth:1,
            		areaStyle: {type: 'default',color:'#0EB4F9'},
                    lineStyle:{
                        width:0//设置线条粗细
                    }
            	}},
            data : [
                {
                    value : cMap,
                    name : compositeMap.period_date+'综合指数'
                }
            ]
        }]
    };
    radaBar.setOption(option);
}

var area = document.getElementById('moocBox');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 0;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
    time=setInterval("scrollUp()",speed);
    area.scrollTop++;
}
function scrollUp(){
    if(area.scrollTop % iliHeight==0){
        clearInterval(time);
        setTimeout(startScroll,delay);
    }else{
        area.scrollTop++;
        if(area.scrollTop >= area.scrollHeight/2){
            area.scrollTop =0;
        }
    }
}
setTimeout(startScroll,delay)

function loc(index){
 window.location.href="./index?tab=" + index;
}
var full = 0;
function fullScreen() {
    if(full==0){
        var element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
        full = 1;
        $("#full_a").html("【退出全屏】");
    }else{
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        full = 0;
        $("#full_a").html("【进入全屏】");
    }

}


function formatNum(num)
{
    if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(num)){alert("wrong!");   return   num;}
    var   a   =   RegExp.$1,   b   =   RegExp.$2,   c   =   RegExp.$3;
    var   re   =   new   RegExp().compile("(\\d)(\\d{3})(,|$)");
    while(re.test(b))   b   =   b.replace(re,   "$1,$2$3");
    return   a   +""+   b   +""+   c;
}
